<template>
  <van-action-sheet :show="show" title="密码修改" @close="closeFn">
    <van-cell-group adjust-position v-if="iptShow">
      <van-field
        @click-icon="() => (showPwd = !showPwd)"
        :password="showPwd"
        label="新密码"
        v-model:model-value="password"
        placeholder="请输入密码"
        @input="inputFn($event, 0)"
        :right-icon="showPwd ? 'closed-eye' : 'eye'"
      />

      <van-field
        @click-icon="() => (newShowPwd = !newShowPwd)"
        :password="newShowPwd"
        label="确认密码"
        v-model:modelValue="newPassword"
        placeholder="请再次输入新密码"
        @input="inputFn($event, 1)"
        :right-icon="newShowPwd ? 'closed-eye' : 'eye'"
      />
    </van-cell-group>
    <div class="btnClass">
      <van-button
        type="primary"
        round
        size="large"
        @click="confirm"
        :disabled="disabled"
        >确认</van-button
      >
    </div>
  </van-action-sheet>
</template>
<script setup>
import { changePwd } from "@/api/login";
import Toast from "@vant/weapp/dist/toast/toast";
import { ref, watch } from "vue";
const props = defineProps({
  show: Boolean,
});
const emit = defineEmits(["show"]);

const iptShow = ref(false);
const showPwd = ref(true);
const newShowPwd = ref(true);
const password = ref("");
const newPassword = ref("");
const disabled = ref(true);

const inputFn = (e, v) => {
  if (v === 0) {
    password.value = e.detail;
  } else {
    newPassword.value = e.detail;
  }
  disabled.value = password.value === newPassword.value ? false : true;
};

const changePwdMethod = async () => {
  await changePwd(newPassword.value);
  Toast.success("修改成功");
  password.value = null;
  newPassword.value = null;
  emit("show");
};

const closeFn = () => {
  iptShow.value = false;
  emit("show");
};

watch(
  () => props.show,
  (e) => {
    if (e) {
      iptShow.value = true;
      disabled.value = true;
    } else {
      setTimeout(() => {
        iptShow.value = false;
      }, 500);
    }
  },
  { deep: true }
);

const confirm = () => {
  changePwdMethod();
};
</script>
<style lang="less" scoped>
.input-box {
  font-size: 32rpx;
  color: #040a18;
  display: flex;
  align-items: center;
  justify-content: center;

  input {
    // border: 1px solid #040A18;
    border-radius: 25px;
    width: 400rpx;
    height: 80rpx;
    padding: 0 10px;
    font-size: 32rpx;
    color: #040a18;
    background-color: rgb(240, 253, 239);
  }
}

.btnClass {
  padding: 50rpx;
}
</style>
